<template>
	<view>
		<view class="head">
			<dsl-navbar title="购买钻石" titleRight="钻石清单" backBg='white' textTitle='white' titleRightStyle='white'
				isBack="" @rightSubmit='rightSubmit'></dsl-navbar>
			<view class="head_message align-center  padding-left">
				<view>
					<view class="text-gray">余额</view>
					<view>
						<text class="text-xl">￥</text>
						<text class="text-sl">{{userInfo.money || '0.00'}}</text>
					</view>
					<view class="align-center">
						<image src="/static/home/imgzuanshi-1.png" mode="widthFix" style="width: 30rpx;"></image>
						<text class="margin-left-xs">{{userInfo.diamond || '0.00'}}</text>
					</view>
				</view>
			</view>
			<view class="flex flex-wrap rowsb padding">
				<view v-for="(item,index) in diamondsList" :key='index'
					:class="[{'active_bg animation-scale-up':index == activeIndex}]" class="pay_body margin-top "
					@click="activeMen(item,index)">
					<view class="margin-top-lg">
						<text class="pay_title">{{item.diamonds}}</text>
						<image src="/static/home/imgzuanshi-1.png" mode="widthFix" style="width: 30rpx;"></image>
					</view>
					<view class="pay_bottom">
						{{item.price}}元
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		mapState,
		mapActions,
	} from 'vuex';

	export default {
		data() {
			return {
				activeIndex: 999
			}
		},
		watch: {
			activeIndex(i) {
				let id = this.diamondsList[i].id
			}
		},
		//生命周期函数
		onReady() {},
		onLoad() {
			this.getdiamondsApi({})
		},
		onShow() {},
		methods: {
			/**
			 * getdiamondsApi 钻石列表
			 * paybuyDiamond 购买钻石
			 */
			...mapActions('money', ['getdiamondsApi', 'paybuyDiamond']),
			rightSubmit() {
				console.log('[1]');
				this.$tools.push('/pages/home/modules/diamond/detail')
			},
			//充值
			activeMen(item, i) {
				let t = this
				this.activeIndex = i
				uni.showActionSheet({
					itemList: ['微信支付', '支付宝支付'],
					success: function(res) {
						if (res.tapIndex == 0) {
							t.paybuyDiamond({
								id: item.id,
								payType: 'wepay'
							})
						} else {
							t.paybuyDiamond({
								id: item.id,
								payType: 'alipay'
							})
						}
					},
					fail: function(res) {
						console.log(res.errMsg);
					}
				});
			}
		},
		computed: {
			/**
			 * diamondsList 钻石列表
			 * userInfo 用户信息
			 */
			...mapState('money', ['diamondsList', 'userInfo']),
		},
		components: {}
	}
</script>

<style>
	.head {
		width: 750rpx;
		height: 317rpx;
		background-image: url(/static/home/imgbeijing-1.png);
		background-size: 100% 100%;
	}

	.head_message {
		width: 690rpx;
		height: 254rpx;
		background: #FFFFFF;
		box-shadow: 0px 0px 14rpx rgba(103, 103, 103, 0.1);
		border-radius: 20rpx;
		margin: 0 auto;
		margin-top: 40rpx;
	}

	.pay_body {
		width: 200rpx;
		height: 220rpx;
		border: 1rpx solid #EAA019;
		border-radius: 20rpx;
		text-align: center;
		position: relative;
	}

	.pay_title {
		font-size: 40rpx;
		font-family: PingFang SC;
		font-weight: bold;
		color: #EAA019;
		opacity: 1;
	}

	.pay_bottom {
		width: 160rpx;
		height: 50rpx;
		line-height: 50rpx;
		text-align: center;
		color: white;
		background: #EAA019;
		opacity: 1;
		border-radius: 30rpx;
		margin: 0 auto;
		position: absolute;
		bottom: 40rpx;
		left: 0;
		right: 0;
	}

	.active_bg {
		background-color: #F9F0E5 !important;
		border: 1rpx solid #F9F0E5 !important;
	}
</style>
